<template>
  <div>
    <div demo-bg>
      <dv-border-box8 :dur="5" style="height:27em;">
        <div dv-bg>
          <div class="lis">
            <li>·</li>
            <p>销量排行榜</p>
          </div>
          <div class="div">
            <div class="da">
              <div class="wai">
              <div class="chi">
                <p>123</p>
              </div>
            </div>
              <p class="text">销售总数</p>
            </div>
            <div class="da">
              <div class="wai">
              <div class="chi">
                <p>123</p>
              </div>
            </div>
              <p class="text">销售总数</p>
            </div>
            <div class="da">
              <div class="wai">
              <div class="chi">
                <p>123</p>
              </div>
            </div>
              <p class="text">销售总数</p>
            </div>
            <div class="da">
              <div class="wai">
              <div class="chi">
                <p>123</p>
              </div>
            </div>
              <p class="text">销售总数</p>
            </div>
          
          </div>
        </div>
      </dv-border-box8>
    </div>

  </div>
</template>
  
<script setup lang="ts">
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'

</script>
<style scoped lang="scss">
.div {
  height: 500px;

  .lis {
    display: flex;
    align-items: center;
    border-bottom: rgb(32, 124, 181) solid 1px;
    line-height: 60px;

    li {
      text-shadow: 0 0 7px rgb(191, 255, 254);
      margin-left: 20px;
      color: #18C7F2;
      font-size: 70px;
      list-style: none;
      line-height: 50px;
      padding-right: 10px;
      padding-bottom: 10px;
    }

    p {
      font-size: 20px;
    }
  }

  .div {
    height: 340px;
    width: 350px;
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .wai {
      // height: 0%;
      background: red;
      width: 135px;
      height: 135px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(../images/img1.png) no-repeat;
      background-size: cover;
      transform: rotateZ(90deg);

      .chi {
        width: 118px;
        height: 118px;
        background: url(../images/img2.png) no-repeat;
        background-size: cover;
        transform: rotateZ(150deg);
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          transform: rotateZ(120deg);
          font-size: 30px;
          color: #FFF32B;
          text-align:center;
          width: 100%;

        }

      }
      
    }
    .text{
        text-align: center;
        line-height: 30px;
        color: rgb(223, 223, 223);
      }
  }

}
</style>